<template>
  <ContentWrap v-loading="formLoading">
    <v-form-designer ref="vfdRef" :createOrUpdate="pageType">
      <template #toolbarBtnSave>
        <el-button type="default" :icon="Back" @click="backPage">返回</el-button>
        <el-button type="primary" @click="saveForm">保存</el-button>
      </template>
    </v-form-designer>
    <!-- 表单弹窗：添加/修改 -->
    <FormConstructForm ref="formRef" @success="getList" />
  </ContentWrap>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import FormConstructForm from './FormConstructForm.vue'
import { FormConstructApi } from '@/api/infra/formconstruct/index'
import { useRouter } from 'vue-router'
import { formConstructRouterName } from '../config'
import {
  Back
} from '@element-plus/icons-vue'
const router = useRouter()
const vfdRef: any = ref(null)
const pageId = ref()
const pageType = ref()
/** 添加/修改操作 */
const formRef = ref()
const saveForm = () => {
  formRef.value.open(pageType.value, pageId.value)
  const designer = vfdRef.value.designer
  const params = {
    widgetList: designer.widgetList,
    formConfig: designer.formConfig
  }
  formRef.value.getJSonData(params)
}
const getList = () => { }
const formLoading = ref(false)
onMounted(async () => {
  vfdRef.value.designer.clearDesigner()
  console.log(vfdRef, 'vfdRef')
  pageId.value = router.currentRoute.value.query.id
  pageType.value = router.currentRoute.value.query.type
  if (pageId.value) {
    formLoading.value = true
    try {
      var res = await FormConstructApi.getFormConstruct(pageId.value)
      var data = JSON.parse(res.formSchema)
      vfdRef.value.designer.widgetList = data.widgetList
      vfdRef.value.designer.formConfig = data.formConfig
      formLoading.value = false
    }finally {
      formLoading.value = false
    }
  
  }
})
const backPage = () => {
  router.push({
    path: formConstructRouterName
  })
}
</script>

<style lang="scss"></style>
